<!doctype html><html><head><meta charset="utf-8" />
<title>uuStorage.js - README</title>
<style>@import url(README.css);</style>
</head><body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">HOME</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">CLASS</a>
   | <a href="./CHANGELOG.htm">CHANGE LOG</a>
   | <a href="./DONATE.htm">DONATE</a>
   | <a href="./LICENSE.htm">LICENSE</a>
   |
</p>
<hr />
<h1>uuStorage.js</h1>
<p><span lang="ja">uuStorage.js は <a href="http://www.w3.org/TR/webstorage/#storage">HTML5::Storage</a> の互換機能を提供する JavaScript ライブラリです。
</span></p>

<h2>Features - 特徴</h2>
<ul>
<li>Fallback:
    <br />- <span lang="ja">HTML5::Storage をサポートしていないブラウザでは、Flash(SharedObject), userData behavior, Cookie をデータの保存先として利用します。
            </span>
</li>
<li>Auto detect:
    <br />- <span lang="ja">Storage クラスは、WebStorage クラス, FlashStorage クラス, IEStorage クラス, CookieStorage クラス, MemStorage クラス の順に利用可能なストレージを探索し、データの保存先として利用します。
            <br />最低限必要とするディスクスペースを指定することで、要求を満たせないストレージバックエンドを選択しないようにする機能や、
                  各バックエンドを個別にインスタンス化する機能もあります。
            </span>
</li>
</ul>

<hr />
<h2>Browser support - サポートするブラウザ</h2>
<ul>
 <li><img src="img/c32.alpha.png" alt="" />Google Chrome 4+</li>
 <li><img src="img/s32.alpha.png" alt="" />Safari 3.1+</li>
 <li><img src="img/i32.alpha.png" alt="" />iPhone 3G+ / iPod / iPad</li>
 <li><img src="img/o32.alpha.png" alt="" />Opera 9.6+<i></i></li>
 <li><img src="img/f32.alpha.png" alt="" />Firefox 3+<i></i></li>
 <li><img src="img/e32.alpha.png" alt="" />IE 6+</li>
</ul>

<hr />
<h2>Storage backend - ストレージバックエンド</h2>
<table>
<tr><th></th><th>LocalStorage</th>
             <th>FlashStorage</th>
             <th>IEStorage</th>
             <th>CookieStorage</th>
             <th>MemStorage</th></tr>
<tr><td><img src="img/c32.alpha.png" alt="" />Google Chrome 4+</td>
  <td><img src="img/check.png" alt="v" />2.5MB</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/s32.alpha.png" alt="" />Safari 3.1 - 3.2</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/s32.alpha.png" alt="" />Safari 4.0+</td>
  <td><img src="img/check.png" alt="v" />8.0MB</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/i32.alpha.png" alt="" />iPhone 3G+ / iPod / iPad</td>
  <td><img src="img/check.png" alt="v" />2.5MB</td>
  <td>-</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/e32.alpha.png" alt="" />IE 6, IE 7, IE 8 (back compat)</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td><img src="img/check.png" alt="v" />63kB</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/e32.alpha.png" alt="" />IE 8</td>
  <td><img src="img/check.png" alt="v" />4.7MB</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/o32.alpha.png" alt="" />Opera 9.6 - 10.10</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/o32.alpha.png" alt="" />Opera 10.50+</td>
  <td><img src="img/check.png" alt="v" />1.8MB</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/f32.alpha.png" alt="" />Firefox 3</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
<tr><td><img src="img/f32.alpha.png" alt="" />Firefox 3.5+</td>
  <td><img src="img/check.png" alt="v" />5.0MB</td>
  <td><img src="img/check.png" alt="v" />1MB ～ 0</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" />3.8kB</td>
  <td><img src="img/check.png" alt="v" />unknown</td></tr>
</table>

<p><span lang="ja">各バックエンドは以下のような特徴を持っています。</span></p>
<dl>
  <dt>LocalStorage - HTML5 標準のクライアントストレージ</dt>
  <dd>LocalStorage の実体は window.localStorage です。
      ストレージの上限はブラウザで異なります。
      ストレージは localStorage と sessionStorage で共用になるため、実際に保存可能な容量はもっと少なくなる場合があります。
  </dd>
  <dt>FlashStorage - SharedObject を利用したクライアントストレージ</dt>
  <dd>FlashStorage の実体は、Flash の SharedObject です。Flash Player 9 以上が必要です。
      デフォルトで100kBまでのデータを保存できます。
      <br />
      ユーザはストレージスペースを、なし(0byte), 10kB, 100kB, 1MB, 10MB または 制限しない(infinity) に
      <a href="http://www.macromedia.com/support/documentation/jp/flashplayer/help/settings_manager03.html">
      設定できる</a>ため、まったく保存できない可能性もあります。
      <br />
      FlashStorage は最大 1MB のストレージとして機能します。1MB 以上のデータはストレージスペースに空きがあっても保存できません。
  </dd>
  <dt>IEStorage - userData behavior を利用したクライアントストレージ</dt>
  <dd>IEStorage の実体は、IE の独自機能(userData behavior)です。
      63kBまでのデータを保存可能です。機能をOFFにされてしまう可能性があります。
  </dd>
  <dt>CookieStorage - Cookie を利用したクライアントストレージ</dt>
  <dd>CookieStorage の実体は Cookie です。
      3.8kBまで保存可能です。CookieをOFFにされてしまう可能性があります。
  </dd>
  <dt>MemStorage - オンメモリストレージ</dt>
  <dd>MemStorage の実体は、Hash です。
      オンメモリのため見かけ上の容量制限はありませんが、ページを閉じるとデータは失われてしまいます。
  </dd>
</dl>

<hr />
<h2>Installation - 導入方法</h2>
<p>1. <span lang="ja">FlashStorage を利用するには、uuStorage.js と同じディレクトリに uu.storage.swf を設置します。</span></p>
<p>2. <span lang="ja">window.xconfig = { storage: Number } を定義すると、最低限必要とする ストレージスペース を byte 数で指定することができます。
    要求を満たせないストレージバックエンドは選択されません。十分なストレージスペースを持ったバックエンドが利用できない場合は、MemStorage が選択されます。
</span></p>
<p>3. <span lang="ja">グローバル関数 window.xstorage() を定義しておくと、Storage クラスが利用可能になったタイミングでシステム側からコールバックします。
  第一引数に uu オブジェクトが、第二引数に Storage クラスのインスタンスが渡されます。</span></p>
<pre class="eg">
window.xstorage = function(uu, storage) {
    uu.puff(storage.getAll());
}
</pre>


<p>4. <span lang="ja">具体的には、このようにします。</span></p>

<a href="demo.storage/HelloStorageWorld.htm" class="run">RUN</a>
<pre class="eg">
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;
&lt;title&gt;Hello HTML5::Storage world&lt;/title&gt;
&lt;script&gt;
    <b>window.xconfig = { storage: 10 * 1024 };</b> <u> // require storage space 10kbyte</u>
&lt;/script&gt;
&lt;script src="<b>uuStorage.js</b>"&gt;&lt;/script&gt;
&lt;script&gt;
<b>function xstorage(uu, storage)</b> {
    storage.set("Hello", "Storage World");

    uu.node.add(uu.format("&lt;div&gt;? ?&lt;/div&gt;",
                          storage.toString(), uu.json(storage.getAll())));
}
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;
</pre>

<p>5. <span lang="ja">Flash がローカル環境(file://...)で動かない場合は、
  サーバにファイル一式をアップロードするか、<a href="http://www.macromedia.com/support/documentation/jp/flashplayer/help/settings_manager04.html">グローバルセキュリティ設定パネル</a> で、
  uu.storage.swf が設置されているフォルダに許可を与えてください。</span></p>

</body>
</html>
